<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <!--内核渲染器-->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <!--IE8/9及以后的版本都会以最高版本IE来渲染页面-->
    <meta name="format-detection" content="telephone=no">
    <!--手机号不被显示为拨号连接-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>订单列表</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="__PUBLIC__static/portal/css/bootstrap.min.css">-->
    <link href="https://cdn.bootcss.com/iview/2.4.0/styles/iview.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iview.css" charset="UTF-8">-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/base.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/footer.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/font.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iconfont(1).css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/index.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/center.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/star/star-rate.css">

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/jquery-1.11.3.min.js"></script>-->
    <script src="__PUBLIC__static/portal/js/jquery.cookie.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/bootstrap.min.js"></script>-->
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/vue.js" charset="UTF-8"></script>-->
    <script src="https://cdn.bootcss.com/iview/2.4.0/iview.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/iview.min.js" charset="utf-8"></script>-->
    <script src="__PUBLIC__static/star/star-rate.js"></script>

    <style>
        .pagination > li > a,
        .pagination > li > span {
            padding: 0.1rem 0.2rem;
            font-size: 0.15rem;
        }

        .modal-title {
            font-size: 0.2rem;
        }
    </style>
</head>

<body>
{include file="layout/head" /}

<div id="buy">
    <div class="per_info">
        <div class="per_portrait">
            {if condition="isset($user['img'])"}
            <img src="{$user['img']}">
            {else /}
            <img src="__PUBLIC__static/portal/img/portrait_def.png">
            {/if}
            <div class="w80">
                <p>{$user.name}</p>
                <p class="li-24 font_14">
                    <span>性别: {$user['sex']}</span>
                    <span>|</span>
                    <span>手机: {$user['phone']}</span>
                </p>
            </div>
        </div>
    </div>
    <div class="warp">
        <h4 class=" pl10 ">
            <a href="{:url('index/user/user')}" class="col_blue">个人中心 &gt;</a>
            <span class="col_gray">我的订单</span>
        </h4>
        <div class="row">
            <div class="col-md-9 col-sm-12">
                <div class="center_title pull-left">
                    <span><a href="{:url('index/user/orderList')}" class="order_active">全部订单</a></span>
                    <span><a href="{:url('index/user/orderList', ['status' => 0])}" class="order_active">待付款</a></span>
                    <span><a href="{:url('index/user/orderList', ['status' => 1])}" class="order_active">已付款</a></span>
                    <span><a href="{:url('index/user/orderList', ['status' => 2])}" class="order_active">已发货</a></span>
                    <span><a href="{:url('index/user/orderList', ['status' => 3])}" class="order_active">已收货</a></span>
                </div>
            </div>
            <!--<div class="col-md-3 col-sm-12">-->
                <!--<div class="pull-right search_input">-->
                    <!--<input type="text" placeholder="请输入订单号" name="find_orderNum">-->
                    <!--<i class="icon iconfont_24 icon-search1"></i>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <!---->
    </div>
    <div>
        {foreach $items as $item}
        <div id="{$item['id']}" class="warp bor_eb mb20">
            <div class="orderList_title">
                <div class="row">
                    <div class="col-md-8 col-sm-24">
                            <span class="pull-left">
                                <span>{$item['order_time']}</span> | 订单号:
                                <span>PTP-{$item['id']}</span> | 在线支付</span>
                    </div>
                    <div class="col-md-4 col-sm-24">
                            <span class="pull-right">
                                {eq name='$item.status' value='3'}
                                <button type="button" class="reject btn btn-default"
                                        data-toggle="modal" data-target="#rejectModal">
                                    退货
                                </button>
                                |
                                {/eq}
                                订单金额：
                                <i class="col_yellow font_20">{$item['total_price']}元</i>
                            </span>
                    </div>
                </div>
            </div>
            {foreach $item['publication'] as $publication}
            <div class="orderList row">
                <div class="col-md-9 col-sm-6">
                    <div class="goodsList">
                        <ul>
                            <li>
                                <a href="{:url('index/index/getBook', ['bookId' => $publication.p_id])}"
                                   title="{$publication.name}">
                                    <img src="{$publication.cover}" title="{$publication.name}" alt="{$publication.name}">
                                </a>
                                <div>
                                    <a href="{:url('index/index/getBook', ['bookId' => $publication.p_id])}"
                                       title="{$publication.name}">
                                        <p>{$publication.name}</p>
                                    </a>
                                    <p>{$publication.price}元 * {$publication.quantity}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-1 col-sm-2 text-center mtb20  li_42 ">
                    {eq name='$item.status' value='1'}
                    <button type="button" class="refund btn btn-danger btn-block"
                            data-oid="{$item.id}" data-pname="{$publication.name}">
                        退款
                    </button>
                    {/eq}
                    {eq name='$item.status' value='3'}
                    <button type="button" class="eval btn btn-warning btn-block"
                            data-pid="{$publication.p_id}" data-pname="{$publication.name}">
                        评价
                    </button>
                    {/eq}
                </div>
                <div class="col-md-2 col-sm-4 text-right mtb20 br_l">
                    <p>
                        <!---->
                    </p>
                    <p>
                        <!---->
                    </p>
                    <p>
                        <button class="center_btn_gray status"
                                data-status="{$item.status}"
                                data-time="{$item.order_time}"
                                data-id="{$item.id}">
                            {$item.status_zh}
                        </button>
                    </p>
                    <p>
                        <!---->
                    </p>
                </div>
            </div>
            {/foreach}
        </div>
        {/foreach}
        <div class="warp text-center">
            {$page}
            <!--<ul class="ivu-page">-->
                <!--&lt;!&ndash;&ndash;&gt;-->
                <!--<li title="上一页" class="ivu-page-prev ivu-page-disabled">-->
                    <!--<a>-->
                        <!--<i class="ivu-icon ivu-icon-ios-arrow-left"></i>-->
                    <!--</a>-->
                <!--</li>-->
                <!--<li title="1" class="ivu-page-item ivu-page-item-active">-->
                    <!--<a>1</a>-->
                <!--</li>-->
                <!--<li title="下一页" class="ivu-page-next ivu-page-disabled">-->
                    <!--<a>-->
                        <!--<i class="ivu-icon ivu-icon-ios-arrow-right"></i>-->
                    <!--</a>-->
                <!--</li>-->
                <!--<div class="ivu-page-options">-->
                    <!--&lt;!&ndash;&ndash;&gt;-->
                    <!--<div class="ivu-page-options-elevator">-->
                        <!--跳至-->
                        <!--<input type="text"> 页-->
                    <!--</div>-->
                <!--</div>-->
            <!--</ul>-->
        </div>
    </div>
</div>

<div class="modal fade" id="evalModal" tabindex="-1" role="dialog" aria-labelledby="evalModalLabel" aria-hidden="true">
    <form action="{:url('index/user/userEvaluation')}" method="post" class="form-horizontal">
        <input id="p_id" type="hidden" name="p_id" value="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="evalModalLabel">
                        评价 <small id="pname"></small>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="star" class="col-sm-2 control-label">五星评分</label>
                        <div class="col-sm-10">
                            <div id="star">
                            </div>
                            <span class="help-block">最少选择一颗星。</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="content" class="col-sm-2 control-label">文本框</label>
                        <div class="col-sm-10">
                        <textarea id="content" name="content" class="form-control" rows="3" placeholder="请输入评价内容"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit-eval">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </form>
</div>

<div class="modal fade" id="refundModal" tabindex="-1" role="dialog" aria-labelledby="refundModalLabel" aria-hidden="true">
    <form class="form-horizontal">
        <input id="r_o_id" type="hidden" name="o_id" value="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="">
                        退款
                    </h4>
                </div>
                <div class="modal-body">
                    <p style="font-size: 0.18rem;">
                        确认退款 <strong id="r_pname"></strong> ?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit-refund">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </form>
</div>

<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        退货
                    </h4>
                </div>
                <div class="modal-body">
                    <p style="font-size: 0.18rem;">
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1309603684&site=qq&menu=yes">
                            <img border="0" src="__PUBLIC__static/portal/img/QQ.png" alt="联系客服" title="联系客服"/>
                        </a>
                        请联系客服，办理退货手续。
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
</div>

{include file="layout/foot" /}

{include file="layout/goback" /}

<script>
    var orderListStatus = '{$status}';
    $(function () {
        $.each($('img'), function (index, item) {
            var width = $(item).attr('width');
            var height = $(item).attr('height');
            if (width != 'undefined' && width != '100%') {
                $(item).css({
                    'width': width + 'px',
                    'height': height + 'px'
                });
            }
        });

        if (orderListStatus) {
            $('.order_active').eq(orderListStatus).addClass('center_active');
        } else {
            $('.order_active').eq(0).addClass('center_active');
        }

        $('.status').click(function () {
            var status = $(this).data('status');
            var time = Date.parse($(this).data('time'));
            var now = Date.parse(new Date());
            var id = $(this).data('id');
            switch (status) {
                case 0:
                    //未支付,不超过30分钟,就可以继续支付
                    if ((now - time) > (60 * 30 * 1000)) {
                        alert('已超过支付期限');
                        break;
                        return;
                    }
                    window.location.href = "{:url('index/shop/order')}" + "?order_id=" + id;
                    break;
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                    //查看订单详情
                    window.location.href = "{:url('index/shop/orderDetails')}" + "?order_id=" + id;
                    break;
                default:
                    //查看订单详情
                    window.location.href = "{:url('index/shop/orderDetails')}" + "?order_id=" + id;
                    console.log('订单状态未知');
            }
        });

        //评论商品
        $('.eval').click(function () {
            $('#p_id').val($(this).data('pid'));
            $('#pname').text($(this).data('pname'));

            $('#star').html('');
            $('#content').val('');
            $('#star').starRate({
                size: 5,
                onEvent: true,
                activeSize: 0,
                starSize: 0.25
            });


            $('#evalModal').modal();
        });
        
        $('#submit-eval').click(function () {
            var p_id = $('#p_id').val();
            var star = $('.is-showXXSAQ').length;
            var content = $('#content').val();

            if (!star || (star < 1) || (star > 5)) {
                star = 1;
            }

            if (!content) {
                content = '用户并无详细评论！';
            }

            $.ajax({
                type: 'POST',
                url: '{:url("index/user/userEvaluation")}',
                data: {
                    'p_id':p_id,
                    'star': star,
                    'content': content
                },
                dataType: 'json',
                async: true,
                success: function (res) {
                    if (res.status) {
                        location.href = '{:url("index/index/getbook")}' + '?bookId=' + p_id + '#evaluation';
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });

        //退款
        $('.refund').click(function () {
            $('#r_o_id').val($(this).data('oid'));
            $('#r_pname').text($(this).data('pname'));


            $('#refundModal').modal();
        });

        $('#submit-refund').click(function () {
            var o_id = $('#r_o_id').val();

            $.ajax({
                type: 'POST',
                url: '{:url("index/user/userRefund")}',
                data: {
                    'o_id':o_id,
                },
                dataType: 'json',
                async: true,
                success: function (res) {
                    if (res.status) {
                        alert(res.msg);
                        location.reload();
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });

    });



</script>

</body>

</html>